<template>
  <el-tabs type="border-card" style="height: 550px">
    <el-tab-pane label="能耗日历">
      <div style="border: 1px solid rgb(235, 235, 235);position: relative;float: left;left: 1%;top: 1%;width: 98%;height: 480px;" id="energy-calendar">
        <div class="calendar-header" style="border-bottom: 1px solid rgb(235, 235, 235);">
          <div style="width: 120px;position: relative;float: left;left: 20px;top: 20px;font-size: 16px;">{{ monthInfo }}</div>
          <div class="button-area" style="position: relative;float: right;border: 1px solid rgb(235, 235, 235);line-height: 35px;right: 2%;top: 11px;height: 35px;">
            <div v-on:click="changeMonth(-1)" style="display: inline-block;border-right: 1px solid rgb(235, 235, 235);text-align: center;">&nbsp;&nbsp;&nbsp;上个月&nbsp;&nbsp;&nbsp;</div>
            <div v-on:click="changeMonth(1)" style="display: inline-block;text-align: center;">&nbsp;&nbsp;&nbsp;下个月&nbsp;&nbsp;&nbsp;</div>
          </div>
        </div>
        <div class="calendar-content" style="margin-top: 20px;">
          <div class="header">
            <div class="day-content" >一</div>
            <div class="day-content" >二</div>
            <div class="day-content" >三</div>
            <div class="day-content" >四</div>
            <div class="day-content" >五</div>
            <div class="day-content" >六</div>
            <div class="day-content" >日</div>
          </div>
          <div class="body" ref="calendar-body">
            <div v-for="(item, index) in requestData"  :key="index" class="day-content" style="background-color: rgba(250, 214, 74, 0.5);">
              <label style="color:gray">{{ item.dayOfMonth }}</label><br>
              <label v-if="selectedEnergy.showType==='stand'">{{$doubleLab(item.increaseStandValue)}}&nbsp;{{selectedEnergy.standUnite}}</label>
              <label v-if="selectedEnergy.showType==='real'">{{$doubleLab(item.increaseRealValue)}}&nbsp;{{selectedEnergy.energy.unite}}</label>
              <label v-if="selectedEnergy.showType==='cash'">{{$doubleLab(item.increaseCashValue)}}&nbsp;{{selectedEnergy.cashUnite}}</label>
            </div>
          </div>
        </div>
      </div>
    </el-tab-pane>
  </el-tabs>
</template>
<style>
#energy-calendar .calendar-header {
  width: 98%;
  margin-left: 1%;
  line-height: 30px;
  height: 50px;
}
#energy-calendar .calendar-header .button-area div{
  cursor: pointer;
}
#energy-calendar .calendar-header .button-area div:hover{
  background-color: rgb(236, 245, 255);
  color: rgb(64, 158, 255);
}
#energy-calendar .calendar-content {
  width: 98%;
  margin-left: 1%;

}
#energy-calendar .calendar-content .day-content {
  display: inline-block;
  width: 14%;
  text-align: center;
  line-height: 25px;
  vertical-align: bottom;
  height: 55px;
  border: 1px solid white;
}
#energy-calendar .calendar-content .body .day-content{
  border-left: 1px solid rgb(235, 235, 235);
  border-top: 1px solid rgb(235, 235, 235);

}
#energy-calendar .calendar-content .body .day-content:nth-child(7n){
  border-right: 1px solid rgb(235, 235, 235);
}
#energy-calendar .calendar-content .body .day-content:nth-last-child(1){
  border-bottom: 1px solid rgb(235, 235, 235);
}
#energy-calendar .calendar-content .body .day-content:nth-last-child(2){
  border-bottom: 1px solid rgb(235, 235, 235);
}
#energy-calendar .calendar-content .body .day-content:nth-last-child(3){
  border-bottom: 1px solid rgb(235, 235, 235);
}
#energy-calendar .calendar-content .body .day-content:nth-last-child(4){
  border-bottom: 1px solid rgb(235, 235, 235);
}
#energy-calendar .calendar-content .body .day-content:nth-last-child(5){
  border-bottom: 1px solid rgb(235, 235, 235);
}
#energy-calendar .calendar-content .body .day-content:nth-last-child(6){
  border-bottom: 1px solid rgb(235, 235, 235);
}
#energy-calendar .calendar-content .body .day-content:nth-last-child(7){
  border-bottom: 1px solid rgb(235, 235, 235);
}
</style>

<script>

export default {
  props: [
    'selectedEnergyId',
    'selectedEnergy'
  ],
  watch : {
    selectedEnergyId(n, o) {
      if (n !== o) {
        this.getCalendarData()
      }
    }
  },
  data() {
    return {
      month:null,
      monthInfo:null,
      requestData:[],
      value: new Date(),
      colors: [
        'rgba(114, 223, 119, 0.5)',
        'rgba(250, 214, 74, 0.5)',
        'rgba(215, 43, 58, 0.5)'
      ]
    }
  },
  name: "map-view",
  mounted() {
    this.getCalendarData()
  },
  unmounted() {
  },
  methods: {
    changeMonth: function (i) {
      const increase = i * 30 * 24 * 60 * 60 * 1000
      const  date = new Date(this.month);
      const  nextDate = new Date(date.getTime() + increase);
      this.month = this.formatToday(nextDate)
      this.getCalendarData()
    },
    getCalendarData: function () {
      const energyId = this.selectedEnergy.energy.id
      const data = {content:{month: this.month, energyId: !energyId || energyId < 0 ? null: energyId}}
      this.$axios({url:'/ems/client/index/energy/calendar', data:data}).then((content) => {
        this.requestData = content.list
        this.month = content.month
        this.monthInfo = content.monthInfo
      })
    },
    formatToday: function (now) {
      const year = now.getFullYear();
      const month = now.getMonth() + 1; // 月份是从0开始的，所以需要+1
      const day = now.getDate();
      return  year + '-' + this.timeLessTen(month) + '-' + this.timeLessTen(day)
    },
    timeLessTen: function (v) {
      if (v < 9) {
        return '0' + v;
      }
      return v;
    }
  },
};
</script>
